<template>
  <view class="orderDetail">
    <view class="box">
      <detailItem title="订单商品" :state="state" :list="goods"></detailItem>
    </view>
    <view class="box">
      <detailCollapse title="订单信息" :list="orderList"></detailCollapse>
    </view>
    <view class="box">
      <detailCollapse title="金额信息" :list="price"></detailCollapse>
    </view>

    <detailLog @click="handleClick"></detailLog>
    <u-gap height="80" bgColor="#F9F9F9"></u-gap>
    <detailFoot
      v-if="btnList.length > 0"
      :list="btnList"
      @click="footBtnFn"
    ></detailFoot>
  </view>
</template>

<!-- 收货单列表详情 -->
<script setup>
import { receiptOrderDetail } from "@/api/order";
import detailCollapse from "@/components/orderDetail/detailCollapse.vue";
import detailItem from "@/components/orderDetail/detailItem.vue";
import detailLog from "@/components/orderDetail/detailLog.vue";
import detailFoot from "@/components/orderDetail/detailFoot.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { message } from "@/hooks/useToast";
import { useDetailStore } from "@/store/detail";
import { BASE_UNIT } from "../../../common/config";
const btnList = computed(() => {
  return [
    {
      name: "收货",
      value: "pay",
      isShow: () => priceDetail.value.billState === 2,
    },
  ].filter((btn) => btn.isShow());
});
const goods = computed(() => {
  return goodsDetail.value.map((btn) => {
    return {
      name: btn.goodsName,
      image: btn.goodsImage,
      des: btn.barCode,
      infoList: [
        {
          value: `${BASE_UNIT.icon}${btn.unitPrice}/${btn.unitName}x${btn.preNum}`,
          tag: "order",
        },
        {
          name: "预订金额",
          value: `${BASE_UNIT.icon}${btn.preAmount}`,
        },
        {
          value: `${BASE_UNIT.icon}${btn.sendoutPrice}x${btn.sendoutNum}斤`,
          tag: "send",
        },
        {
          name: "实发金额：",
          value: `${BASE_UNIT.icon}${btn.sendoutAmount}`,
        },
        {
          value: `${BASE_UNIT.icon}${btn.affirePrice}x${btn.affireNum}斤`,
          tag: "accept",
        },
        {
          name: "收货金额：",
          value: `${BASE_UNIT.icon}${btn.affireAmount}`,
        },
        {
          name: "备注：",
          value: `${btn.remark || ""}`,
        },
      ],
    };
  });
});
const price = computed(() => {
  return [
    {
      name: "金额合计",
      value: uni.$u.priceFormat(priceDetail.value.orderAmount, 2),
    },
    {
      name: "运费",
      value: uni.$u.priceFormat(priceDetail.value.deliveryFee, 2),
    },
    {
      name: "折扣",
      value: priceDetail.value.discount,
    },
    {
      name: "优惠券",
      value: uni.$u.priceFormat(priceDetail.value.minusAmount, 2),
    },
    {
      name: "支付方式",
      value: priceDetail.value.paymentName,
    },
    {
      name: "预订金额",
      value: uni.$u.priceFormat(priceDetail.value.preAmount, 2),
    },
    {
      name: "实发金额",
      value: uni.$u.priceFormat(priceDetail.value.sendoutAmount, 2),
    },
    {
      name: "收货金额",
      value: uni.$u.priceFormat(priceDetail.value.affireAmount, 2),
      custom: {
        paddingBottom: "11px",
      },
    },
  ];
});
const orderList = computed(() => {
  return [
    {
      name: "订单单号",
      value: priceDetail.value.orderCode,
      copy: true,
    },
    {
      name: "送货日期",
      value: uni.$u.timeFormat(priceDetail.deliveryDateTime, "yyyy-mm-dd"),
    },
    {
      name: "送货仓库",
      value: priceDetail.value.workhouseName,
    },
    {
      name: "备注",
      value: priceDetail.value.remark,
    },
  ];
});
const id = ref("");
const detail = ref({});
const goodsDetail = computed(() => {
  return detail.value.respOmsOrderBillInfoDTOList || [];
});
const priceDetail = computed(() => {
  return detail.value.respOmsOrderBillDTO || {};
});
const state = computed(() => {
  return priceDetail.value.billStateStr;
});
onLoad((params) => {
  if (params.id) {
    id.value = params.id;
  }
});
onShow(() => {
  getDetail();
});
const getDetail = async () => {
  const res = await receiptOrderDetail({
    id: id.value,
  });
  detail.value = res;
};
const detailStore = useDetailStore();
const handleClick = () => {
  detailStore.setLogList(detail.value.respOmsOrderBillLogDTOList);
  uni.navigateTo({
    url: "/pages/orderList/detailLog",
  });
};
const footBtnFn = (name) => {
  if (name === "pay") {
    uni.navigateTo({
      url:
        "/pages/orderList/receipt/receiptListSave?id=" + priceDetail.value.id,
    });
  }
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
  padding-top: 13px;
}

.box {
  margin-bottom: 10px;
}
</style>
